# dev.assetPrefix

- **Type:** `boolean | string | 'auto'`
- **Default:** [server.base](/config/server/base)

Set the URL prefix of static assets in [development mode](/config/mode).

`assetPrefix` will affect the URLs of most of the static assets, including JavaScript files, CSS files, images, videos, etc. If an incorrect value is specified, you'll receive 404 errors while loading these resources.

This config is only used in development mode. In the production mode, please use the [output.assetPrefix](/config/output/asset-prefix) to set the URL prefix.

## Default Value

The default value of `dev.assetPrefix` is the same as [server.base](/config/server/base).

When `server.base` is `/foo`, `index.html` and other static assets can be accessed through `http://localhost:3000/foo/`.

It should be noted that when customizing the `dev.assetPrefix` option, if you want static assets to be normally accessible through the Rsbuild dev server, `dev.assetPrefix` should contain the same URL prefix as `server.base`, such as:

```ts
export default {
  dev: {
    assetPrefix: '/foo/bar/',
  },
  server: {
    base: '/foo',
  },
};
```

## Boolean Type

If `assetPrefix` is set to `true`, the URL prefix will be `http://localhost:<port>/`:

```js
export default {
  dev: {
    assetPrefix: true,
  },
};
```

The resource URL loaded in the browser is as follows:

```html
<script defer src="http://localhost:3000/static/js/main.js"></script>
```

If `assetPrefix` is set to `false` or not set, `/` is used as the default value.

## String type

When the value of `assetPrefix` is a `string` type, the string will be used as a prefix and automatically appended to the static resource URL.

- For example, set to a path relative to the root directory:

```js
export default {
  dev: {
    assetPrefix: '/example/',
  },
};
```

The resource URL loaded in the browser is as follows:

```html
<script defer src="http://localhost:3000/example/static/js/index.js"></script>
```

- For example, set to a complete URL:

```js
export default {
  dev: {
    assetPrefix: 'https://example.com/assets/',
  },
};
```

The resource URL loaded in the browser is as follows:

```html
<script defer src="https://example.com/assets/static/js/index.js"></script>
```

### Port placeholder

The port number that Rsbuild server listens on may change. For example, if the port is in use, Rsbuild will automatically increment the port number until it finds an available port.

To avoid `dev.assetPrefix` becoming invalid due to port changes, you can use one of the following methods:

- Enable [server.strictPort](/config/server/strict-port).
- Use the `<port>` placeholder to refer to the current port number. Rsbuild will replace the placeholder with the actual port number it is listening on.

```js title="rsbuild.config.ts"
export default {
  dev: {
    assetPrefix: 'http://localhost:<port>/',
  },
};
```

## Path Types

assetPrefix can be set to the following types of paths:

- **absolute path**: This is the most common practice, can be specific server paths, like `/assets/`.
- **'auto'**: Rspack will automatically calculate the path and generate relative paths based on file location.

:::tip
It's not recommended to set assetPrefix as a relative path, such as `'./assets/'`. This is because when assets are at different path depths, using relative paths may cause assets to load incorrectly.
:::

## Compare with `publicPath`

The functionality of `dev.assetPrefix` is basically the same as the [output.publicPath](https://rspack.dev/config/output#outputpublicpath) config in Rspack.

The differences from the native configuration are as follows:

- `dev.assetPrefix` only takes effect in development mode.
- `dev.assetPrefix` default value is the same as [server.base](/config/server/base).
- `dev.assetPrefix` automatically appends a trailing `/` by default.
- The value of `dev.assetPrefix` is written to the [process.env.ASSET_PREFIX](/guide/advanced/env-vars#processenvasset_prefix) environment variable (can only be accessed in client code).
